<template>
  <div class="container">
    <el-card>
      <el-breadcrumb
        separator-class="el-icon-arrow-right"
        class="tags"
        v-show="this.$route.query.id"
      >
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>学科管理</el-breadcrumb-item>
        <el-breadcrumb-item>标签</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 目录名称、状态、新增目录 -->
      <el-form :inline="true" :model="tags" class="demo-form-inline">
        <el-form-item label="目录名称">
          <el-input v-model="queryInfo.tagName"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="queryInfo.state" placeholder="请选择">
            <el-option label="已启用" value="1"></el-option>
            <el-option label="已禁用" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-button @click="clearboth">清除</el-button>
        <el-button type="primary" @click="searchBotn">搜索</el-button>
        <el-button
          type="success"
          icon="el-icon-edit"
          @click="dialogAddVisible = true"
          style="float: right"
          >新增目录</el-button
        >
        <el-button
          type="text"
          icon="el-icon-back"
          @click="$router.push('/subjects/list')"
          style="float: right"
          v-show="this.$route.query.id"
          >返回学科</el-button
        >
      </el-form>
      <el-alert
        :title="`数据一共${this.counts}条`"
        type="info"
        :closable="false"
        show-icon
      >
      </el-alert>
      <!-- 表格区域 -->
      <el-table
        :data="tagsList"
        stripe
        style="width: 100%"
        :header-cell-style="headClass"
      >
        <el-table-column type="index" label="序号" width="170">
        </el-table-column>
        <el-table-column prop="subjectName" label="所属学科" width="230">
        </el-table-column>
        <el-table-column prop="tagName" label="标题名称" width="230">
        </el-table-column>
        <el-table-column prop="username" label="创建者" width="230">
        </el-table-column>
        <el-table-column label="创建日期" width="260">
          <template slot-scope="{ row }">
            <span>{{
              row.addDate | parseTimeByString('{y}-{m}-{d} {h}:{i}:{s}')
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" width="270">
          <div slot-scope="{ row }">
            {{ row.state === 1 ? '已禁用' : '已启用' }}
          </div>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{ row }">
            <el-button
              type="text"
              size="small"
              v-if="row.state === 1"
              @click="qufan(row)"
              >启用</el-button
            >
            <el-button type="text" size="small" v-else @click="qufan(row)"
              >禁用</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="edit(row)"
              :disabled="row.state === 0"
              >修改</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="deleteTags(row)"
              :disabled="row.state === 0"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页功能 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        layout="prev, pager, next, sizes,  jumper"
        :total="counts"
        :page-sizes="[1, 2, 3, 4, 6, 10]"
        :page-size="queryInfo.pagesize"
        background
      >
      </el-pagination>
      <!-- 添加标签的组件 -->
      <el-dialog
        title="新增目录"
        :visible.sync="dialogAddVisible"
        width="20%"
        :before-close="handleClose"
      >
        <tagsAdd
          @close="close_clear"
          @tagsList="getTags()"
          :query="this.$route.query"
        ></tagsAdd>
      </el-dialog>
      <!-- 修改标签弹出框 -->
      <el-dialog
        title="修改目录"
        :visible.sync="dialogEditVisible"
        width="20%"
        :before-close="handleClose"
      >
        <!-- 学科进入的时候 -->
        <el-form
          ref="tagsAddform"
          :model="addTags"
          label-width="80px"
          :rules="tagsAddrules"
          v-if="this.$route.query.id"
        >
          <el-form-item label="目录名称" prop="muluName">
            <el-input
              v-model="addTags.tagName"
              placeholder="请输入目录名称"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="dialogEditVisible = false">取消</el-button>
            <el-button type="primary" @click="tagsAddokk">确认</el-button>
          </el-form-item>
        </el-form>
        <!-- 我的学科标签进入 -->
        <el-form
          ref="tagsAddform"
          :model="addTags"
          label-width="80px"
          :rules="tagsAddrules"
          v-else
        >
          <el-form-item label="所属学科">
            <el-select v-model="addTags.subjectName" placeholder="请选择">
              <el-option
                v-for="(item, index) in subjectList"
                :key="index"
                :label="item.subjectName"
                :value="item.subjectID"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="目录名称" prop="muluName">
            <el-input
              v-model="addTags.tagName"
              placeholder="请输入目录名称"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="dialogEditVisible = false">取消</el-button>
            <el-button type="primary" @click="tagsAddokk">确认</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { list, update, remove } from '@/api/hmmm/tags'
import tagsAdd from '../components/tags-add.vue'
export default {
  name: 'tags',
  data() {
    return {
      inputName: '',
      tags: {
        name: '',
        status: ''
      },
      // 数据总条数
      counts: 0,
      queryInfo: {
        pagesize: 10,
        pagenum: 1,
        tagName: '',
        state: '',
        subjectID: 0
      },
      // 保存数据
      tagsList: [],
      // 添加标签弹出框
      dialogAddVisible: false,
      // 编辑标签的弹出框
      dialogEditVisible: false,
      addTags: {
        tagName: '',
        subjectID: '',
        subjectName: ''
      },
      // 验证规则
      tagsAddrules: {
        muluName: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 1, max: 10, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ]
      },
      // 保存学科列表的数据
      subjectList: [],
      // 数据id，通过row保存-编辑
      id: '',
      // 数据id，通过row保存-删除
      delid: 0,
      // 学科传值
      listQuery: {
        id: '',
        date_time: ''
      }
    }
  },
  methods: {
    headClass() {
      return 'background-color: #fafafa;border-bottom: 3px solid #e8e8e8;'
    },

    // 获取标签列表数据
    async getTags() {
      const { data } = await list({
        page: this.queryInfo.pagenum,
        pagesize: this.queryInfo.pagesize
      })
      // console.log(data)
      // 保存数据总条数
      this.counts = data.counts
      // 保存数据
      this.tagsList = data.items
      this.pagesize = parseInt(data.pagesize)
      this.pagenum = parseInt(data.page)
    },
    // 获取标签状态数据
    // 分页区域
    handleSizeChange(size) {
      // console.log(size)
      this.queryInfo.pagesize = size
      this.getTags()
    },
    handleCurrentChange(num) {
      this.queryInfo.pagenum = num
      // console.log(num)
      this.getTags()
    },
    // 清空输入框
    clearboth() {
      this.tags.name = ''
      this.tags.status = ''
    },
    // 搜索
    async searchBotn() {
      const { data } = await list({
        tagName: this.queryInfo.tagName,
        state: this.queryInfo.state
      })
      // console.log(data)
      this.tagsList = data.items
    },
    // 取消添加弹出框
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
        })
        .catch((_) => {})
    },
    // 取消弹框并清内容
    close_clear(val) {
      // console.log(val)
      this.dialogAddVisible = false
      val.muluName = ''
      val.subject = ''
    },
    // 编辑
    edit(row) {
      console.log(row)
      this.dialogEditVisible = true
      // console.log(row)
      // 保存数据id
      this.id = row.id
      this.addTags.subjectID = row.subjectID
      this.addTags.tagName = row.tagName
      this.addTags.subjectName = row.subjectName
    },
    // 确认编辑
    async tagsAddokk() {
      const dataa = {
        id: this.id,
        subjectID: this.addTags.subjectID,
        tagName: this.addTags.tagName
      }
      this.getTags()
      // console.log(this.id)
      // console.log(this.addTags.subject)
      // console.log(this.addTags.muluName)
      await update(dataa)
      // console.log(res)
      this.$message({
        message: '修改标签成功',
        type: 'success'
      })
      this.dialogEditVisible = false
    },
    // 获取学科列表数据
    async getsubject() {
      const { data } = await list()
      // console.log(data)
      this.subjectList = data.items
      console.log(data.items)
    },
    // 删除功能
    deleteTags(row) {
      // console.log(row)
      this.delid = row.id
      this.$confirm('此操作将永久删除该标签, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await remove({ id: this.delid })
          // console.log(res)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          if (this.counts % this.queryInfo.pagesize === 1) {
            this.queryInfo.pagenum--
          }
          this.getTags()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 禁用启用二者取反
    qufan(row) {
      if (row.state === 1) {
        row.state = 0
      } else {
        row.state = 1
      }
    }
  },

  created() {
    this.getTags()
    this.getsubject()
    // console.log(this.$route.query)
    if (this.$route.query) {
      this.listQuery.id = this.$route.query.id
      this.listQuery.date_time = this.$route.query.date_time
    }
  },
  components: {
    tagsAdd
  }
}
</script>

<style scoped lang="less">
.container {
  .tags {
    color: #000;
    background-color: #fff;
    height: 30px;
    line-height: 30px;
    padding: 0 0px 50px 20px;
    box-sizing: border-box;
    /deep/.el-breadcrumb__inner {
      color: #000 !important;
    }
  }
  .el-col {
    display: flex;
    /deep/.el-input__inner {
      width: 160px;
    }
  }
  .el-pagination {
    float: right;
    margin: 10px;
  }
}
</style>
